<template>
  <div class="result-table-container">
    <el-table :data="resultList" border stripe height="400px" v-loading="processing">
      <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
      <el-table-column prop="resumeNumber" label="简历编号" width="180"></el-table-column>
      <el-table-column prop="score" label="质量分" width="100">
        <template #default="{row}">
          <span v-if="row.score">{{ row.score }}/100</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{row}">
          <el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button 
            v-if="row.scoreResult" 
            type="primary" 
            size="small" 
            @click="showDetail(row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { QualityScoreResult, DetailItem } from '@/api/resume'

// 定义结果项接口
interface ResultItem {
  userId: string
  resumeNumber: string
  score: string
  status: string
  scoreResult: QualityScoreResult | null
  errors: DetailItem[]
}

const props = defineProps<{
  resultList: ResultItem[]
  processing: boolean
}>()

const emit = defineEmits<{
  'show-detail': [row: ResultItem]
}>()

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case '完成': return 'success'
    case '处理中': return 'info'
    case '失败': return 'danger'
    case '无简历': return 'warning'
    default: return 'info'
  }
}

// 显示详情
const showDetail = (row: ResultItem) => {
  emit('show-detail', row)
}
</script>

<style scoped>
.result-table-container {
  margin-top: 15px;
}
</style>